<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet"/>
    <style>
		.center-wrap {
			padding: 40px;
		}
		.abs-center {
			text-align: center;
		}
		.mui-input-group:before{
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    height: 1px;
		    background-color: #c8c7cc;
		    content: '';
		    -webkit-transform: scaleY(0.5);
		    transform: scaleY(0.5);
		}
		.pat-list.mui-table-view .mui-media-object {
		    max-width: 80px;
		    height: 70px;
		    line-height: 70px;
		}
		.interval-span ~ .interval-span {
			padding-left: 8px;
		}
		.pat-price {
			position: relative;
			top: 3px;
			color: #30B497;
			font-weight: 600;
		}
		.mui-table-view {
			position: relative;
		}
		.mui-table-view-cell>.mui-checkbox {
			z-index: 99;
			position: absolute;
			right: 0;
		}
		.mui-table-view-cell>.mui-checkbox input[type="checkbox"] {
			position: static;
		}
		.mui-icon>img {
		    width: 40px;
    		margin-right: 8px;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">积分详情</h1>
	</header>
	
	<div class="mui-content">
		<div class="center-wrap">
			<div class="abs-center" id="top-panel">
				<span class="intergral">+130</span>
				<p>兑换成功</p>
				<p style="margin-top: 15px;font-size: 10px;">今天  12:00</p>
			</div>
		</div>
		
		<div class="oe-divide-block"></div>
		
		<ul class="mui-table-view pat-list" id="detail-panel">
		    <li class="mui-table-view-cell" data-page="integral/home" style="line-height: 40px;">
				<a>
					<span class="mui-icon mui-pull-left">
					</span>
					加载中...
				</a>
			</li>
		</ul>
	</div>
	
	<script id="tmp-top" type="text/html">
		{{if top}}
			<span class="intergral">{{top.pd_sign === 'plus' ? '+' : '-'}}{{top.pd_amount}}</span>
				<p>兑换成功</p>
			<p style="margin-top: 15px;font-size: 10px;">{{top.pd_ctime}}</p>
		{{/if}}
	</script>
	
	<script id="tmp-detail" type="text/html">
		{{if top.pd_sign === 'plus'}}
			{{each detail.data.or_goods_id as v i}}
				<li class="mui-table-view-cell">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="{{v.goods_thumb_img}}">
			            <div class="mui-media-body">
		                	{{v.goods_name}}
			                <p class="mui-ellipsis">
			                	<span class="interval-span">{{v.goods_brief}}</span>
			                </p>
			                <span class="pat-price">￥{{v.goods_shop_price}}</span>
			            </div>
			        </a>
			    </li>
			{{/each}}
		{{else}}
		    <li class="mui-table-view-cell" data-page="integral/home"  style="line-height: 40px;">
				<a>
					<span class="mui-icon mui-pull-left">
						<img src="{{detail.data.ped_img}}"/>
					</span>
					{{detail.data.ped_withdrawals_account}}
				</a>
			</li>
		{{/if}}
	</script>
	
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/lib/template.js"></script>
    <script type="text/javascript" charset="UTF-8">
    	;(function($, a){
    		var wv,
    			html,
    			tmpData = {},
    			topPanelEle = document.getElementById("top-panel"),
    			detailPanelEle = document.getElementById("detail-panel");
    		
    		$.plusReady(function(){
    			wv = plus.webview.currentWebview();
    			tmpData.top = wv.data;
    			
    			html = template('tmp-top', tmpData);
    			topPanelEle.innerHTML = html;
    			
    			renderDetail();
    			
    		});
    		
    		function renderDetail(){
    			if(tmpData.top.pd_sign === 'plus'){
    				a.net.get('c_sp_order/show', {or_id: tmpData.top.or_id}, function(data){
			    		if(data && data.code === '100'){
			    			tmpData.detail = data;
			    			html = template('tmp-detail', tmpData);
    						detailPanelEle.innerHTML = html;
			    		}
			    	})
    			}else {
    				a.net.get('c_points/show_exchange_detail', {ped_id: tmpData.top.or_id}, function(data){
			    		if(data && data.code === '100'){
			    			tmpData.detail = data;
			    			html = template('tmp-detail', tmpData);
    						detailPanelEle.innerHTML = html;
			    		}
			    	})
    			}
    		}
    	}(mui, app));
	</script>
</body>
</html>